<template>
    <div class="wrapper" >
        <!-- 功能icon -->
        <img src="@/assets/images/icon/主题色返回.svg" class="back" @click="router.back()">
        <img src="@/assets/images/icon/转发.svg" class="transmit">
        <!-- 轮播图 -->
        <div class="swiper">
            <swiper
                :images="goodsInfo.contentImages"></swiper>
        </div>

        <!-- 商品信息-->
        <div class="goodsInfo">

            <!-- 拼租 -->
            <div class="isRent" v-if="goodsInfo.isShare">
                <p>拼</p>
            </div>

            <!--  收藏 -->
            <img 
                src="@/assets/images/icon/收藏.svg" 
                class="star" 
                v-show="!isStar" 
                @click="isStar=!isStar">
            <img 
                src="@/assets/images/icon/starred.png" 
                class="star" 
                v-show="isStar" 
                @click="isStar=!isStar">

            <!-- 关键信息: 价格、城市 -->
            <div class="keyInfo">
                <!-- 标题 -->
                <p class="title">
                    <!-- {{route.params.title}} -->
                    <!-- 使用props:true可以简化为一下写法 -->
                    {{goodsInfo.title}}
                </p>
                <div class="priceLine">
                    <img src="@/assets/images/icon/人民币.svg" alt="" class="money">
                    <span class="price">{{goodsInfo.priceDay + '/日 '+ goodsInfo.priceMonth + '/月'}}</span>
                    <!-- 城市 -->
                    <span class="city">浙江</span>
                </div>

                <!-- 简介 -->
                <div class="profile">
                    <span>{{goodsInfo.content}}</span>
                </div>

                <!-- 标签 -->
                <ul class="tag">
                    <li v-if="goodsInfo.isShare">支持拼单</li>
                    <li v-for="tag in tags">
                        {{tag}}
                    </li>
                </ul>
            </div>
            


            <!-- 附近拼租 -->
            <div class="nearShare">
                <span>附近拼租（3/4）</span>
                <img src="@/assets/images/icon/更多_灰色.svg" alt="" class="goShareFurther">
            </div>
            <!-- 商家详情 -->
            <div class="merchantInfo">
                <!-- 头像 -->
                <img class="headPic" :src="merchantInfo.headPicSrc">
                <!-- 昵称 -->
                <span class="nickname">{{merchantInfo.nickname}}</span>
                <!-- 发起聊天 -->
                <router-link 
                    :to="{
                        name:'msgDetail',
                        params:{
                            id:userId,
                            lastTime:new Date().toLocaleDateString()
                        }

                    }">
                    <img src="@/assets/images/icon/消息_灰.svg" class="goForChat">
                </router-link>
                <!-- 进入店铺 -->
                <router-link 
                    :to="{
                        name:'otherHomePage',
                        params:{
                            userId:userId,
                        }
                    }"
                >
                <img src="@/assets/images/icon/店铺-2.svg" class="goForShop" @click="goShop">
                </router-link>
                
            </div>
            <!-- 租品评价 -->
            <div class="comment">
                <span>租品评价（143）</span>
                <img src="@/assets/images/icon/更多_灰色.svg" class="goCommentFurther" >
            </div>
            <!-- 按钮区 -->
            <div class="keyBtn">
                <button class="shareRent">发起拼租</button>
                <button class="rentNow">立即租赁</button>
            </div>
        </div>
    </div>
</template>
    
<script setup>
    import { useRoute, useRouter } from 'vue-router';
    import { onBeforeMount,onMounted,ref,reactive,computed } from 'vue';
    import Swiper from '@/components/goods/Swiper.vue'
    //api
    import {GoodsRequester} from '@/api/api.js'
    const GoodsRqster = new GoodsRequester();

    const router = useRouter();
    //const route = useRoute(); //引入props后不再需要

    let props = defineProps({
        goodsId:String,
        userId:String||Number,
    })

    //商家信息
    var merchantInfo = reactive({
        headPicSrc:'',
        nickname:'',
        credit:50,  //信誉分
    });

    let goodsWraper = reactive({
        //商品粗略信息
        goodsRough:{
            /*  "id": "6",
            "merchantId": 6,
            "goodsImages": "https://gw.alicdn.com/bao/uploaded/i2/O1CN011HrgnI1GA8u0UdAmw_!!0-fleamarket.jpg_q50.jpg_.webp",
            "goodsName": "井祈",
            "priceDay": 50,
            "priceMonth": 50,
            "tags": "天然气,樱桃,微软,铭瑄",
            "flag": 0,
            "status": 1,
            "createTime": "2022-10-30 22:13:26",
            "publishTime": "2022-10-30 22:13:26" */
        },
        //商品详细信息
        goodsDetail:{
          /*   "id": 6,
            "goodsId": "6",
            "title": "磐正精英盈通",
            "content": "\t\n激光鼠\n拉杆鼠标\n推杆鼠标\n拉杆鼠\n推杆鼠\n轨迹球\n速蛇\n灵蛇\n蝰蛇\n炼狱蝰蛇\n金环蛇\n铜斑蛇\n响尾蛇\n蓝色粒子\n蓝粒\n巨蝮蛇\n布斯朗悍蛇\n螳螂王\n螳螂操控王\n螳螂操控\n操控王\n螳螂速度王\n螳螂速度\n速度王\n破坏王\n破",
            "tags": "天然气,樱桃,微软",
            "contentImages": "https://gw.alicdn.com/bao/uploaded/i2/O1CN011HrgnI1GA8u0UdAmw_!!0-fleamarket.jpg_q50.jpg_.webp",
            "staticUrl": "nothing",
            "publishTime": "2022-10-30 13:15:43" */
        },
        //商品拼租信息
        goodsShareInfo:{
/*             "id": 1,
            "goodsId": "1",
            "isShare": 1,
            "brand": "华为",
            "wantShare": 30,
            "visitors": 100,
            "currenter": 10 */
        }
    })

    //合并商品信息
    let goodsInfo = computed(()=>{
        return {...goodsWraper.goodsRough,...goodsWraper.goodsDetail,...goodsWraper.goodsShareInfo}
    })

    //从返回的数据中拿到tags数组用于v-for遍历
    let tags = computed(()=>{
        if (goodsInfo.value.tags)
        return goodsInfo.value.tags.split(',')
    })

    let isStar = ref(false);
    
    //请求商品详情数据
    onBeforeMount(()=>{
        //获取商品粗略信息
        GoodsRqster.reqGoodsRough(props.goodsId).then((res)=>{
            console.log('商品粗略信息',res.data);
            goodsWraper.goodsRough = res.data;
        })

        //发起获取商品详细数据的请求
        GoodsRqster.reqGoodsDetial(props.goodsId).then(res=>{
            console.log('商品详细信息：',res.data);
            goodsWraper.goodsDetail = res.data;
        })

        //获取商品拼租信息：
        GoodsRqster.reqGoodsShareInfo(props.goodsId).then(res=>{
            console.log('商品拼租信息：',res.data);
            goodsWraper.goodsShareInfo = res.data;
        })

        //获取卖家详细信息
        GoodsRqster.reqMerchantDetial(props.userId).then(res=>{
            console.log('卖家详细信息:',res.data);

            merchantInfo.headPicSrc = res.data.image;
            merchantInfo.nickname = res.data.nickname;
            merchantInfo.credit = res.data.credit;
        }).catch(err=>{
            alert('获取卖家信息失败！');
        })
        
    })






    


</script>
    
<style lang="scss" scoped>
    .wrapper{
        width: 4.28rem;
        height: 3.86rem;
        position: relative;
        /* background-color: pink; */
        img.back{
            width: 0.24rem;
            height: 0.24rem;
            position: absolute;
            top:0.6rem;
            left: 0.38rem;
            
        }
        img.transmit{
            width: 0.24rem;
            height: 0.24rem;
            position: absolute;
            top:0.6rem;
            right: 0.38rem;
        }
        /* 轮播图 */
        .swiper{
            width: 4.28rem;
            height: 2.96rem;
            position: absolute;
            top:0.9rem;
            /* background-color: orange; */
        }

        /* 商品详情 */
        .goodsInfo{
            width: 4.28rem;
           /*  height: 5.4rem; */
            position:absolute;
            top:3.86rem;
            background: #f2f2f2;
            border-radius: 0.50rem 0.50rem 0rem 0rem;
            

            /* 拼租？ */
            .isRent{
                width: 0.38rem;
                height: 0.38rem;
                position: absolute;
                z-index: 3;
                top:-0.19rem;
                right: 0.2rem;
                background-color: #F0BF2D;
                border-radius: 50%;
                text-align: center;
                
                p{
                    color:white;
                    line-height: 0.38rem;
                    font-size: 0.18rem;
                    font-weight: bold;
                }
            }

            /* 收藏 */
            .star{
                z-index: 2;
                width: 0.23rem;
                height: 0.23rem;
                position: absolute;
                top:1.2rem;
                right: 0.56rem;
            }
            /* 关键信息 */
            .keyInfo{

                //height: 2.25rem;
                position: relative;
                margin:0.45rem 0.5rem;
               /*  margin-top:0.45rem;
                margin-left: 0.58rem; */
               /*  background-color: lightblue; */


                /* 标题 */
                .title{
                    
                    font-size: 0.24rem;
                    color: #000000;
                    line-height: 0.25rem;
                    font-weight: bold;
                }

                /* 价格 */
                .priceLine{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin-top:0.09rem;

                    img.money{
                        width: 0.17rem;
                        height: 0.17rem;
                        
                    }
                    span.price{
                        color:#F0BF2D;
                        font-size: 0.18rem;
                        font-size: bold;
                        line-height: 0.25rem;
                    }
                    span.city{
                        color:#7F7F7F;
                        font-size: 0.14rem;
                        margin-left: 0.13rem;
                        margin-top:0.04rem;
                    }


                }

                /* 简介 */
                .profile{
                    width:100%;
                    //height: 2rem;
                    margin-top:0.18rem;
                    overflow: scroll;
                    text-align:left;
                    >span{
                        line-height: 0.28rem;
                        font-size: 0.16rem;
                        color: #7f7f7f;

                    }
                }

                /* 标签 */
                .tag{
                    width: 100%;;
                    height: 0.3rem;
                    margin-top:0.2rem;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    /* flex-wrap: wrap; */
                    text-align: center;
                    overflow: scroll;
                    >li{
                        white-space: nowrap;
                        line-height: 0.3rem;
                        padding: 0 0.15rem;
                        background-color: rgba(111,161,30,0.70);;
                        border-radius: 0.15rem;
                        color:white;
                        margin-right: 0.2rem;
                        font-size: 0.14rem;

                    }
                }
            }


            /* 附近拼租 */
            .nearShare{
                position: relative;
                
                width: 3.8rem;
                height: 0.5rem;
                margin:0.2rem auto;
                background: #ffffff;
                border-radius: 0.10rem;
                span{
                    line-height: 0.5rem;
                    font-weight: bold;
                    margin-left: 0.25rem;
                    color: #000000;
                    font-size: 0.14rem;
                }
                img{
                    position: absolute;
                    right: 0.28rem;
                    top:0.18rem;
                    height: 0.14rem;
                    width: 0.14rem;

                }
                
            }

            /* 商家信息 */
            .merchantInfo{
                position: relative;
                width: 3.80rem;
                height: 0.78rem;
                background: #ffffff;
                border-radius: 0.10rem;
                font-size: 0.14rem;
                margin:0.17rem auto;
                display: flex;
                align-items: center;
                img.headPic{
                    width: 0.5rem;
                    height: 0.5rem;
                    margin-left: 0.26rem;

                }
                .nickname{
                    margin-left: 0.14rem;
                    font-size: 0.18rem;
                    font-weight: bold;
                }

                img.goForChat{
                    width:0.24rem;
                    height:0.24rem;
                    position: absolute;
                    right: 0.71rem;
                    top:0.32rem;

                }
                
                img.goForShop{
                    width:0.24rem;
                    height:0.24rem;
                    position: absolute;
                    right: 0.32rem;
                    top:0.32rem;
                }

                


            }

            /* 评价 */
            .comment{
                width: 3.80rem;
                height: 0.34rem;
                background: #ffffff;
                border-radius: 0.10rem;
                font-size: 0.14rem;
                margin:0.17rem auto;
                position: relative;
                display: flex;
                align-items: center;
                span{
                    line-height: 0.34rem;
                    margin-left: 0.25rem;
                    font-weight: bold;
                    font-size: 0.14rem;
                }
                img.goCommentFurther{
                    width: 0.2rem;
                    height: 0.2rem;
                    position: absolute;
                    right:0.3rem ;
                    
                }
            }

            .keyBtn{
                display: flex;
                justify-content:center;
                align-items: center;
                button{
                    width: 1.8rem;
                    height:0.5rem;
                    text-align: center;
                    line-height: 0.5rem;
                    border-radius: 0.15rem;
                    border: none;
                    color: white;
                    font-size: 0.18rem;
                    font-weight: bold;
                    letter-spacing:0.06rem;
                }
                button.shareRent{
                    margin-right: 0.2rem;
                    background: #6fa11e;
                }

                button.rentNow{
                    background-color: #F0BF2D;

                }
            }
            
        }

    }
</style>